﻿// 01. 定义全局函数
/*(function ($) {
$.sum = function (array) {
var total = 0;
$.each(array, function (index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;

total += value;
});

return total;
};

$.average = function (array) {
if ($.isArray(array)) {
return $.sum(array) / array.length;
}
return '';
};
})(jQuery);*/

// 02. 定义全局函数(扩展jQuery对象)
/*(function ($) {
$.extend({
sum: function (array) {
var total = 0;
$.each(array, function (index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;

total += value;
});

return total;
},
average: function (array) {
if ($.isArray(array)) {
return $.sum(array) / array.length;
}
return '';
}
});
})(jQuery);*/

// 03. 使用命名空间隔离函数
(function ($) {
    $.mathUtils = {
        sum: function (array) {
            var total = 0;
            $.each(array, function (index, value) {
                value = $.trim(value);
                value = parseFloat(value) || 0;

                total += value;
            });

            return total;
        },
        average: function (array) {
            if ($.isArray(array)) {
                return $.mathUtils.sum(array) / array.length;
            }
            return '';
        }
    };

    $.fn.swapClass = function (class1, class2) {
        /*this.each(function () {
        var $element = $(this);
        if ($element.hasClass(class1)) {
        $element.removeClass(class1).addClass(class2);
        } else if ($element.hasClass(class2)) {
        $element.removeClass(class2).addClass(class1);
        }
        });*/
        // return 增加连缀功能，返回jQuery对象
        return this.each(function () {
            var $element = $(this);
            if ($element.hasClass(class1)) {
                $element.removeClass(class1).addClass(class2);
            } else if ($element.hasClass(class2)) {
                $element.removeClass(class2).addClass(class1);
            }
        });
    };

    //shadow-01
    /*$.fn.shadow = function () {
    return this.each(function () {
    var $originalElement = $(this);
    for (var i = 0; i < 5; i++) {
    $originalElement.clone().css({
    position: 'absolute',
    left: $originalElement.offset().left + i,
    top: $originalElement.offset().top + i,
    margin: 0,
    zIndex: -1,
    opacity: 0.1
    }).appendTo('body');
    }
    });
    };*/

    //shadow-02:参数对象
    /*$.fn.shadow = function (options) {
    return this.each(function () {
    var $originalElement = $(this);
    for (var i = 0; i < options.copies; i++) {
    $originalElement.clone().css({
    position: 'absolute',
    left: $originalElement.offset().left + i,
    top: $originalElement.offset().top + i,
    margin: 0,
    zIndex: -1,
    opacity: options.opacity
    }).appendTo('body');
    }
    });
    };*/

    //shadow-03:默认值
    /*$.fn.shadow = function (opts) {
    var defaults = {
    copies: 5,
    opacity: 0.1
    };
    var options = $.extend(defaults, opts);
        
    return this.each(function () {
    var $originalElement = $(this);
    for (var i = 0; i < options.copies; i++) {
    $originalElement.clone().css({
    position: 'absolute',
    left: $originalElement.offset().left + i,
    top: $originalElement.offset().top + i,
    margin: 0,
    zIndex: -1,
    opacity: options.opacity
    }).appendTo('body');
    }
    });
    };*/

    //shadow-04:回调函数
    /*$.fn.shadow = function (opts) {
    var defaults = {
    copies: 5,
    opacity: 0.1,
    copyOffset: function (index) {
    return { x: index, y: index };
    }
    };

    var options = $.extend(defaults, opts);

    return this.each(function () {
    var $originalElement = $(this);
    for (var i = 0; i < options.copies; i++) {
    var offset = options.copyOffset(i);
    $originalElement.clone().css({
    position: 'absolute',
    left: $originalElement.offset().left + offset.x,
    top: $originalElement.offset().top + offset.y,
    margin: 0,
    zIndex: -1,
    opacity: options.opacity
    }).appendTo('body');
    }
    });
    };*/

    //shadow-05:可定制的默认值
    $.fn.shadow = function (opts) {

        var options = $.extend({}, $.fn.shadow.defaults, opts);

        return this.each(function () {
            var $originalElement = $(this);
            for (var i = 0; i < options.copies; i++) {
                var offset = options.copyOffset(i);
                $originalElement.clone().css({
                    position: 'absolute',
                    left: $originalElement.offset().left + offset.x,
                    top: $originalElement.offset().top + offset.y,
                    margin: 0,
                    zIndex: -1,
                    opacity: options.opacity
                }).appendTo('body');
            }
        });
    };

    $.fn.shadow.defaults = {
        copies: 5,
        opacity: 0.1,
        copyOffset: function (index) {
            return { x: index, y: index };
        }
    };

    // 使用jQuery UI部件工厂创建插件
    $.widget('ljq.tooltip', {
        _create: function () {
            this._tooltipDiv = $('<div></div>').addClass('ljq-tooltip-text ' + 'ui-widget ui-state-highlight ui-corner-all').hide().appendTo('body');
            this.element.addClass('ljq-tooltip-trigger').on('mouseenter.ljq-tooltip', $.proxy(this._open, this)).on('mouseleave.ljq-tooltip', $.proxy(this._close, this));
        },
        destroy: function () {
            this._tooltipDiv.remove();
            this.element.removeClass('ljq-tooltip-trigger').off('.ljq-tooltip');
            $.Widget.prototype.destroy.apply(this, arguments);
        },
        _open: function () {
            if (!this.options.disabled) {
                var elementOffset = this.element.offset();
                this._tooltipDiv.css({
                    position: 'absolute',
                    left: elementOffset.left + this.options.offsetX,
                    top: elementOffset.top + this.element.height() + this.options.offsetY
                }).text(this.options.content.call(this.element[0]));
                this._tooltipDiv.show();
            }
        },
        _close: function () {
            this._tooltipDiv.hide();
        },
        options: {
            offsetX: 10,
            offsetY: 10,
            content: function () {
                return $(this).data('tooltip-text');
            }
        },
        open: function () {
            return this._open();
        },
        close: function () {
            return this._close();
        }
    });

})(jQuery);

// 添加全局函数需要以新方法来扩展jQuery对象。添加实例方法与此类似，但扩展的确实jQuery.fn对象
//eg. jQuery.fn.myMethod = function(){alert('nothing happens'};
// jQuery.fn 是 jQuery.prototpye的别名

$(document).ready(function () {
    var quantities = $('#inventory tbody').find('td:nth-child(2)').map(function (index, qty) {
        return $(qty).text();
    }).get();

    var sum = $.mathUtils.sum(quantities);
    $('#sum').find('td:nth-child(2)').text(sum);

    var prices = $('#inventory tbody').find('td:nth-child(3)').map(function (index, price) {
        return $(price).text();
    }).get();

    var avg = $.mathUtils.average(prices);
    $('#average').find('td:nth-child(3)').text(avg.toFixed(2));

    $('table').click(function () {
        $('tr').swapClass('one', 'two');
    });

    //shadow-01
    //$('h1').shadow();

    //shadow-02
    //$('h1').shadow({ copies: 8, opacity: 0.25 });

    //shadow-03
    //$('h1').shadow({ copies: 3 });
    //$('h1').shadow();

    //shadow-04
    /*$('h1').shadow({ copyOffset: function (index) {
    return { x: -index, y: -2 * index };
    }
    });*/

    //shadow-05
    $.fn.shadow.defaults.copies = 10;
    $('h1').shadow({
        copyOffset: function (index) {
            return { x: -index, y: index };
        }
    });

    $('a').tooltip();

    // 课后题
    // 1. 创建新的名为.slideFadeIn()和.slideFadeOut()的插件方法，把不透明度动画方法.fadeIn()和.fadeOut()以及高度动画方法.slideDown()和.slideUp()结合起来。

    // 2. 扩展.shadow()方法的可定制能力，让插件用户可以指定元素副本的z轴索引。为提示条部件添加一个isOpen子方法，这个方法应该在提示条正在显示的时候返回true，而在其他时候返回false。 

    // 3.  添加代码监听我们部件触发的tooltipopen事件，并在控制台中记录一条消息。

    // 4.  挑战：为提示条部件提供一个可以替代的content选项，通过AJAX取得链接的href属性指向的页面的内容，然后将取得的内容作为提示条的文本。
    
    // 5.  挑战：为提示条部件提供一个新的effect选项，如果指定该选项，则应用以该名字（如explode）指定的jQuery UI效果显示或隐藏提示条。 
    
});